<template>
  <div class="app-container">
    <div class="activity-detail-page">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2 class="page-title">优惠券活动详情</h2>
        <el-button @click="goBack" icon="ArrowLeft">返回</el-button>
      </div>

      <!-- 活动基本信息 -->
      <div class="detail-section" v-loading="loading">
        <h3 class="section-title">优惠券活动详情</h3>
        <el-descriptions :column="2" border v-if="activityData.activityId">
          <el-descriptions-item label="活动名称">{{ activityData.activityName }}</el-descriptions-item>
          <el-descriptions-item label="活动类型">
            <el-tag v-if="activityData.activityType === '新人发劵'" type="primary">新人发劵</el-tag>
            <el-tag v-else-if="activityData.activityType === '精确发劵'" type="success">精确发劵</el-tag>
            <el-tag v-else-if="activityData.activityType === '邀新赠券'" type="warning">邀新赠券</el-tag>
            <el-tag v-else-if="activityData.activityType === '自动赠券'" type="danger">自动赠券</el-tag>
            <span v-else>{{ activityData.activityType }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="活动范围">{{ activityData.activityScope }}</el-descriptions-item>
          <el-descriptions-item label="活动时间">
            {{ parseTime(activityData.startTime, '{y}-{m}-{d}') }} ~ {{ parseTime(activityData.endTime, '{y}-{m}-{d}') }}
          </el-descriptions-item>
          <el-descriptions-item label="活动状态">
            <el-tag v-if="activityData.status === '未开始'" type="primary">未开始</el-tag>
            <el-tag v-else-if="activityData.status === '进行中'" type="success">进行中</el-tag>
            <el-tag v-else-if="activityData.status === '已结束'" type="danger">已结束</el-tag>
            <el-tag v-else-if="activityData.status === '已暂停'" type="warning">已暂停</el-tag>
            <span v-else>{{ activityData.status }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="领取频率">{{ activityData.receiveFrequency }}</el-descriptions-item>
          <el-descriptions-item label="活动总发放数量">{{ activityData.totalIssueCount }}</el-descriptions-item>
          <el-descriptions-item label="单日发放数量">{{ activityData.dailyIssueCount }}</el-descriptions-item>
          <el-descriptions-item label="单用户限领数量">{{ activityData.userLimitCount }}</el-descriptions-item>
        </el-descriptions>
        <div v-else-if="!loading" class="no-data">
          暂无数据
        </div>
      </div>

      <!-- 优惠券列表 -->
      <div class="detail-section">
        <h3 class="section-title">优惠券列表</h3>
        <el-table :data="couponList" border style="width: 100%">
          <el-table-column prop="couponName" label="优惠券名称" align="center" />
          <el-table-column prop="couponAmount" label="优惠券金额" align="center" />
          <el-table-column prop="couponType" label="优惠券类型" align="center" />
          <el-table-column prop="issueCount" label="赠送数量" align="center" />
        </el-table>
        <div v-if="couponList.length === 0" class="no-data">
          暂无数据
        </div>
      </div>

                    <!-- 会员列表 -->
        <div class="detail-section">
          <h3 class="section-title">会员列表</h3>
          <el-table :data="memberList" border style="width: 100%">
            <el-table-column prop="memberId" label="会员ID" align="center" />
            <el-table-column prop="memberName" label="会员昵称" align="center" />
          </el-table>
          <div v-if="memberList.length === 0" class="no-data">
            暂无数据
          </div>
        </div>
    </div>
  </div>
</template>

<script setup name="ActivityDetail">
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getActivity } from "@/api/coupon/activity"
import { parseTime } from '@/utils/ruoyi'

const router = useRouter()
const route = useRoute()

// 响应式数据
const activityData = ref({})
const couponList = ref([])
const memberList = ref([])
const loading = ref(true)

// 获取活动详情
async function getActivityDetail() {
  try {
    loading.value = true
    const activityId = route.query.id
    if (activityId) {
      const response = await getActivity(activityId)
      activityData.value = response.data
      couponList.value = response.data.couponActivityRelationList || []
      memberList.value = response.data.activityUserRelationList || []
    }
  } catch (error) {
    console.error('获取活动详情失败:', error)
  } finally {
    loading.value = false
  }
}

// 返回上一页
function goBack() {
  router.go(-1)
}

// 页面加载时获取数据
onMounted(() => {
  getActivityDetail()
})

// 监听路由参数变化，重新获取数据
watch(() => route.query.id, (newId, oldId) => {
  if (newId && newId !== oldId) {
    getActivityDetail()
  }
})
</script>

<style scoped>
.activity-detail-page {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.detail-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
  position: relative;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 30px;
  height: 2px;
  background: #409eff;
}

.no-data {
  text-align: center;
  color: #909399;
  padding: 40px 20px;
  font-size: 14px;
  background: #fafafa;
  border-radius: 4px;
  margin-top: 10px;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
  background: #f5f7fa;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

:deep(.el-table) {
  border-radius: 4px;
  overflow: hidden;
}

:deep(.el-table th) {
  background: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

:deep(.el-tag) {
  font-weight: 500;
}
</style>
